<template>
	<div class="container">
		<div class="abs">
			<el-link icon="el-icon-back" @click="$router.go(-1)"></el-link>
			<el-link icon="el-icon-s-home" @click="$router.push('/')"></el-link>
		</div>
		<!-- <img src="/ka.jpg" alt="" class="soundplay" @click="handleClick"> -->
		<!-- <audio src="/我的一个道姑朋友-以冬.mp3" controls></audio> -->
		
		<audio controls class="soundplay1">
			<source :src="audioSrc" type="audio/mp3">
		</audio>
		<div class="soundplay" @click="playsound()" @dblclick="replaysound()"></div>
		<!-- <Audio ref="audio" class="audio-box" fileurl="/我的一个道姑朋友-以冬.mp3"></Audio> -->
		<div class="main">

			<div class="header">
				<img :src="goods.img_url">
				<div class="info">
					<p class="title">{{goods.details_name}}</p>
					<p class="score">
						<el-rate v-model="pinfen" disabled show-score text-color="#ff9900" score-template="{value}">
						</el-rate>
					</p>
					<p class="like"> <i class="el-icon-star-off"></i> 收藏</p>
				</div>
			</div>
			<div class="item">
				<div class="title">材 料</div>
				<!-- <div class="info">{{goods.details_cailiao}}</div> -->
				<div class="info">{{recipeIngredient}}</div>
			</div>
			<div class="item">
				<div class="title">做 法</div>
				<!-- <div class="info">{{goods.details_zuofa}}</div> -->
				<div class="info" v-html="recipeInstructions"> </div>
			</div>
		</div>
	</div>
</template>

<script>
	import baseUrl from '@/utils/urlconfig'
	import TtsRecorder from '@/assets/js/audio';
	// import Audio from '../components/Audio.vue'
	const ttsRecorder = new TtsRecorder();
	export default {
		data() {
			return {
				cookinfo: [],
				goods: null,
				text: '你好，我是小智',
				flag: false
			}
		},
		// components: {
		//     Audio
		//   },
		methods: {
			handleClick(){
				this.flag = !this.flag;
				var str = this.goods.details_name + ",评分," + this.goods.ratingvalue + "分,材料," + this.goods.recipeIngredient.join(' 、') + ",做法," +  this.goods.recipeInstructions.replace(/\n/g, '。')
				this.text = str
				console.log(str)
				// console.log(this.goods)
				if(this.flag){
					this.play()
				}
				else{
					this.pause()
				}
			},
			playsound(){
				let audio = document.getElementsByTagName('audio')[0];
				let flag = audio.paused
				console.log(flag)
				if (flag){
					audio.play()
				} else{
					audio.pause()
				}
				
			},
			replaysound(){
				let audio = document.getElementsByTagName('audio')[0];
				audio.currentTime = 0;
				audio.play()
			},
			play() {
				//要合成的文本
				ttsRecorder.setParams({
					// 文本内容
					text: this.text,
					// 角色
					//  voiceName: '',
					// 语速
					speed: 50,
					// 音量
					voice: 50,
				});
				ttsRecorder.start();
			},
			pause() {
				ttsRecorder.stop();
			}
		},
		computed: {
			audioSrc(){
				let src =  baseUrl+"/menu/SendMp3/"+ this.goods.id +".mp3"
				return  src
			},
			pinfen() {
				// console.log(this.goods.details_pingfen)
				// var a = parseFloat(JSON.parse(this.goods.info).aggregateRating.ratingValue)
				var a = parseFloat(this.goods.ratingvalue)
				// var pingfen = this.goods.info.aggregateRating.ratingValue
				return a
			},
			recipeIngredient() {
				// console.log(this.goods.details_pingfen)
				// var a = parseFloat(JSON.parse(this.goods.info).aggregateRating.ratingValue)
				var a = this.goods.recipeIngredient.join(' 、')
				// var pingfen = this.goods.info.aggregateRating.ratingValue
				return a
			},
			recipeInstructions() {
				// console.log(this.goods.details_pingfen)
				// var a = parseFloat(JSON.parse(this.goods.info).aggregateRating.ratingValue)
				var a = this.goods.recipeInstructions.replace(/\n/g, '<br><br>')
				// var pingfen = this.goods.info.aggregateRating.ratingValue
				return a
			}
		},
		created() {
			var goodsitem = this.$route.params.goods_detail
			console.log(goodsitem)
			if (goodsitem === undefined) {
				this.goods = JSON.parse(localStorage.getItem('goodsitem'))
			} else {
				this.goods = goodsitem
				// console.log(this.goods)
			}
		},
		mounted() {}
	}
</script>

<style scoped>
	/* 全局导入公共样式 */
	@import url("../assets/css/common.css");

	.orange {
		color: #FA6424;
	}

	.container {
		position: relative;
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: url(../assets/images/goods_bg1.png);
		background-size: 100% 100%;
		border: 1px solid #797979;

	}
	.container .soundplay1 {
/* 		width: 0.625rem;
		height: 0.625rem; */
		display: none;
	}
	.container .soundplay {
/* 		width: 0.625rem;
		height: 0.625rem; */
		background: url(../assets/images/xiaozhi.png);
		margin-left: 0.175rem;
		height: 0.9375rem;
		width: 0.9375rem;
		background-size: 0.9375rem,0.9375rem;
		position: absolute;
		left: 0%;
		bottom: 0;
		opacity: 0.8;
	}

	.main {
		width: 9.125rem;
		height: 4.2375rem;
		margin: 0.7825rem auto;
		/* background-color: #000FFF; */
		overflow: auto;
		/* 1111111 */
	}

	/* 1111111 */
	/*滚动条整体样式*/
	::-webkit-scrollbar {
		width: 0px;
		/*竖向滚动条的宽度*/
		height: 0px;
		/*横向滚动条的高度*/
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面的小方块*/
		background: #666666;
		border-radius: 0.00625rem;
	}

	::-webkit-scrollbar-track {
		/*滚动条轨道的样式*/
		background: #ccc;
		border-radius: 0.00625rem;
	}

	/* 1111111 */
	.header img {
		width: 1.8rem;
		height: 1.35rem;
		border-radius: 0.0625rem;
		vertical-align: bottom;
	}

	.header .info {
		display: inline-block;
		margin-left: 0.175rem;
	}

	.header .info p {
		margin: 0;
	}

	.header .info .title {
		font-size: 0.3rem;
		font-weight: bold;
		color: #140707;
		line-height: 0;
	}

	.header .info .score {
		margin-top: 0.1875rem;
		margin-bottom: 0.0625rem;
		color: #FA6424;
	}

	.header .info .score i:last-child {
		margin-right: 0.0625rem;
		font-weight: 0;
		color: #a1a1a1;
	}

	.header .info .like {
		width: 1.275rem;
		height: 0.41875rem;
		background: #a1a1a1;
		color: #fff;
		font-size: 0.2625rem;
		text-align: center;
		line-height: 0.41875rem;
		border-radius: 0.0625rem;
	}

	.main .item {
		margin-top: 0.225rem;
		font-weight: bold;
		color: #000000;
	}

	.main .item .title {
		font-size: 0.2625rem;
		opacity: 0.55;
	}

	.main .item .info {
		font-size: 0.225rem;
		line-height: 0.375rem;
		margin-left: 0.125rem;
	}

	.abs .el-link {
		font-size: 0.125rem;
		margin-right: 0.125rem;
	}
</style>
